<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>自定义指令，适用于所有预定义指令不能满足需求时，按照自己的意愿添加</p>
        <!-- 通过原生js操作dom，并且封装成了指令 -->
        <!-- v-focus 作用是在页面加载完成后，自动为输入框获取光标 -->
        <input type="text" v-focus.aa="666">
        <!-- <h1 v-hide>我是标题</h1> -->
    </div>
    <script>
        // 全局注册 指令
        // 格式 第一个参数是名称（不带v-），第二个参数是指令具体内容
        Vue.directive('focus', {
            // 钩子函数 条件满足时自动执行
            inserted(el, binding) {
                // el 是被绑定的元素，可以直接操作
                // binding是一个对象
                console.log(binding);
                el.focus()
            }
        })
        // 默认隐藏元素
        // Vue.directive('hide', {
        //     inserted(el) {
        //         el.style.display = 'none'
        //     }
        // })
        let vm = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>